import React from 'react';
import {View, StyleSheet, PanResponder} from 'react-native';

/**
 * 基础滑动条 slider
 * 此滑动条仅保证整数值情况下完整的
 */
export default class NumberSlider extends React.Component<any> {
  private _panResponder: any;
  constructor(props: any) {
    super(props);
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderTerminationRequest: () => false,
      onStartShouldSetPanResponderCapture: () => true, // 🔑 捕获手势
      onMoveShouldSetPanResponderCapture: () => true, // 🔑 捕获手势
      onPanResponderMove: (evt, gestureState) => {
        console.log('move', gestureState.dx, gestureState.dy);
      },
      onPanResponderRelease: () => {
        console.log('release');
      },
      onPanResponderTerminate: () => {
        console.log('terminated ❌');
      },
    });
  }
  render() {
    const containerStyle: any = [
      {
        height: 72.37,
        overflow: 'hidden',
        width: 350.34,
      },
      {marginLeft: 10.68},
      {opacity: 1},
    ];

    return (
      <View style={containerStyle}>
        <View style={styles.body} {...this._panResponder.panHandlers} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  body: {
    width: '100%',
    height: '100%',
    alignSelf: 'center',
    backgroundColor: 'lightblue',
  },
});
